/*
 * @Author: xuhongling
 * @Date:   2023-08-24 14:51:00
 * @Last Modified by:   xuhongling
 * @Last Modified time: 2023-11-23 16:54:25
 */
import dateTimeLabelFormat from '@/hooks/web/useDateTimeFormat';

// ECharts Option
const setChartOption = (stationData, chartData) => {
  const chartDataN: any[] = [];
  const chartDataP: any[] = [];
  const chartDataK: any[] = [];
  for (let i = 0; i < chartData.length; i++) {
    chartDataN.push([chartData[i].tmMin, chartData[i].h10]);
    chartDataP.push([chartData[i].tmMin, chartData[i].h20]);
    chartDataK.push([chartData[i].tmMin, chartData[i].h40]);
  }
  chartDataN.reverse();
  chartDataP.reverse();
  chartDataK.reverse();
  // 设置 ECharts Option
  const chartOption = {
    color: ['#5096ff', '#ff9966', '#1ad1a3', '#5470c6', '#fc8452', '#9a60b4', '#ee6666', '#73c0de', '#3ba272'],
    title: {
      text: `${stationData.stnm}过程线`,
      left: 'center',
      top: '10',
      textStyle: {
        fontSize: 16,
      },
    },
    legend: {
      type: 'scroll',
      left: 'center',
      top: '44',
      itemWidth: 16,
      itemHeight: 10,
      data: ['10公分含水率', '20公分含水率', '30公分含水率'],
    },
    xAxis: {
      type: 'time',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#333',
        },
      },
      axisTick: {
        show: true,
        inside: true,
        interval: 'auto',
        lineStyle: {
          color: '#999',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#f4f4f4',
        },
      },
      axisLabel: {
        show: true,
        margin: 14,
        color: '#333',
        fontSize: 12,
        formatter: (value, index) => {
          return dateTimeLabelFormat(value, index);
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        position: 'left',
        scale: true,
        splitNumber: 5,
        boundaryGap: ['0%', '5%'],
        nameTextStyle: {
          color: '#333',
        },
        axisTick: {
          show: false,
          inside: true,
          lineStyle: {
            color: '#999',
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#333',
          },
        },
        axisLabel: {
          show: true,
          color: '#333',
          fontSize: 12,
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#f4f4f4',
          },
        },
      },
    ],
    series: [
      {
        name: '10公分含水率',
        type: 'line',
        yAxisIndex: 0,
        showSymbol: false,
        connectNulls: true,
        lineStyle: {
          color: '#5096ff',
          width: 2,
        },
        data: chartDataN,
      },
      {
        name: '20公分含水率',
        type: 'line',
        yAxisIndex: 0,
        showSymbol: false,
        connectNulls: true,
        lineStyle: {
          color: '#ff9966',
          width: 2,
        },
        data: chartDataP,
      },
      {
        name: '30公分含水率',
        type: 'line',
        yAxisIndex: 0,
        showSymbol: false,
        connectNulls: true,
        lineStyle: {
          color: '#1ad1a3',
          width: 2,
        },
        data: chartDataK,
      },
    ],
  };
  return chartOption;
};

export default setChartOption;
